<template>
<view class="qrcode">
    <image :src="qrcodeURL" @longpress="save"> </image>
    <slot name="text"></slot>
</view>
</template>

<script>
// components/myComponent.js
const QR = require("./weapp-qrcode.js");
const rpx2px = uni.getSystemInfoSync().windowWidth / 750;

export default {
  data() {
    return {
      qrcodeURL: ''
    };
  },

  components: {},
  props: {
    value: String,
    //二维码内容
    width: String //二维码宽度（默认长宽相等）

  },
  options: {
    addGlobalClass: true,
    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },
  mounted: function () {
    var imgData = QR.drawImg(this.value, {
      typeNumber: 3,
      //码点大小 1-40，数字越大，码点越小，二维码会显得越密集
      errorCorrectLevel: 'H',
      //纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
      size: parseInt(rpx2px * this.width)
    });
      this.qrcodeURL= imgData
  },
  methods: {
    /**
     * 长按保存图片
     */
    save: function () {
      var self = this;
      var aa = uni.getFileSystemManager(),
          filePath = uni.env.USER_DATA_PATH + '/qrcode_' + self.value + '.png'; //写入临时文件

      aa.writeFile({
        filePath: filePath,
        data: self.qrcodeURL.slice(22),
        encoding: 'base64',
        success: res => {
          //保存临时文件到手机相册中去
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function (res) {
              uni.showToast({
                title: '保存成功'
              });
            },
            fail: function (err) {
              console.log(err);
            }
          });
          console.log(res);
        },
        fail: err => {
          console.log(err);
        }
      });
    }
  }
};
</script>
<style>
.qrcode{
  position: relative;
  width: 400rpx;
  height: 400rpx;
  text-align: center;
}
.qrcode image{
  width: 400rpx;
  height: 400rpx;
}


</style>